<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 - 登录</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/all.min.css" rel="stylesheet">
    <link href="../css/sweetalert2.min.css" rel="stylesheet">
    <style>
    .login-container {
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-box {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 40px;
        width: 100%;
        max-width: 420px;
    }

    .login-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .login-header h3 {
        color: #333;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .login-header p {
        color: #666;
        font-size: 14px;
    }

    .form-control {
        height: 46px;
        padding: 10px 15px;
        border-radius: 8px;
        border: 1px solid #ddd;
    }

    .form-control:focus {
        border-color: #764ba2;
        box-shadow: 0 0 0 0.2rem rgba(118, 75, 162, 0.25);
    }

    .btn-login {
        height: 46px;
        border-radius: 8px;
        background: #764ba2;
        border: none;
        font-weight: 500;
        width: 100%;
    }

    .btn-login:hover {
        background: #663d96;
    }

    .input-group-text {
        background: transparent;
        border-right: none;
    }

    .form-control.with-icon {
        border-left: none;
    }

    .form-control.with-icon:focus {
        border-left: 1px solid #764ba2;
    }

    .login-footer {
        text-align: center;
        margin-top: 20px;
        color: #666;
        font-size: 13px;
    }
    </style>
</head>
<body>
    <div id="loginApp" class="login-container">
        <div class="login-box">
            <div class="login-header">
                <h3>后台管理系统</h3>
                <p>请输入您的账号和密码登录</p>
            </div>
            
            <form @submit.prevent="handleLogin">
                <div class="mb-4">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-user text-muted"></i>
                        </span>
                        <input type="text" 
                               class="form-control with-icon" 
                               v-model="form.username"
                               placeholder="请输入用户名"
                               :disabled="loading"
                               required>
                    </div>
                </div>
                
                <div class="mb-4">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-lock text-muted"></i>
                        </span>
                        <input :type="showPassword ? 'text' : 'password'" 
                               class="form-control with-icon" 
                               v-model="form.password"
                               placeholder="请输入密码"
                               :disabled="loading"
                               required>
                        <button class="btn btn-outline-secondary" 
                                type="button"
                                @click="togglePassword">
                            <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                        </button>
                    </div>
                </div>
                
                <button type="submit" 
                        class="btn btn-primary btn-login" 
                        :disabled="loading">
                    <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
                    {{ loading ? '登录中...' : '登录' }}
                </button>
            </form>
            
            <div class="login-footer">
                © {{ new Date().getFullYear() }} 后台管理系统
            </div>
        </div>
    </div>

    <script src="../js/lib/vue.min.js"></script>
    <script src="../js/lib/sweetalert2.min.js"></script>
    <script src="../js/pages/login.js"></script>
</body>
</html> 